<template>

	<view class="nav-content"
		:style="{'padding-top':marginTop+'px',width:width,background:textShow?background:'rgba(0,0,0,0)'}">
		<view class="back-btn" @click="back">
			<u-icon :name="pagesLength==1?'home':'arrow-left'" size="calc(42vmin / 7.5)" color="#ffffff"></u-icon>
		</view>
		<view class="text" :style="{color:color,fontSize:size,opacity:textShow?1:0}">
			{{text}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "navBack",
		props: {
			text: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#ffffff'
			},
			size: {
				type: String,
				default: '28rpx'
			},
			width: {
				type: String,
				default: '100vw'
			},
			background: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			defaultTextShow: {
				type: Boolean,
				default: true
			},
			backCustom:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				marginTop: 0,
				pagesLength: 1,
				textShow: true
			};
		},
		mounted() {
			this.textShow = this.defaultTextShow
			this.marginTop = uni.getMenuButtonBoundingClientRect().top
			this.pagesLength = getCurrentPages().length
			let that = this
			uni.$on('onPageScroll', function(data, code = false) {
				if (code) {
					that.textShow = data >= 20
				} else {
					that.textShow = data < 20
				}

			});
		},

		methods: {
			back() {
				
				if (this.pagesLength == 1) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					if(this.backCustom) return this.$emit('backChang')
					uni.navigateBack({
						delta: 1
					});
				}
			}
		}
	}
</script>

<style scoped>
	.nav-content {
		position: fixed;
		top: 0;
		left: 0;
		height: 68rpx;
		z-index: 99999;
	}

	.back-btn {
		padding: calc(10vmin / 7.5) calc(11vmin / 7.5) calc(10vmin / 7.5) calc(9vmin / 7.5);
		background-color: rgba(0, 0, 0, .4);
		border-radius: 50%;

		position: absolute;
		left: calc(20vmin / 7.5);
	}

	.text {
		position: absolute;
		left: 50%;
		height: 68rpx;
		line-height: 68rpx;
		transform: translateX(-50%);
		transition: all .4s;
		text-shadow: 0 0 2rpx #ccc;
	}
</style>
